<template>
	<div>
		<template>
			<el-button type="primary" round @click="dialogFormVisible = true">添加</el-button>
			<el-dialog title="添加商品信息" :visible.sync="dialogFormVisible">
				<el-form :model="form">
					<el-form-item label="商品名字" :label-width="formLabelWidth">
						<el-input v-model="form.name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品简介" :label-width="formLabelWidth">
						<el-input v-model="form.descriptions" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="数量" :label-width="formLabelWidth">
						<el-input v-model="form.quantity" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="价格" :label-width="formLabelWidth">
						<el-input v-model="form.price" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="主图" :label-width="formLabelWidth">
						<el-input v-model="form.coverImg" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品分类" :label-width="formLabelWidth" >
						<el-select v-model="form.productCategory"  placeholder="请选择商品分类">
							<template v-for='item in categories'>
								<el-option :label="item.name" :value="item._id"></el-option>
							</template>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormVisible = false,queding()">确 定</el-button>
				</div>
			</el-dialog>

			<el-dialog title="修改商品详情" :visible.sync="dialogFormVisibles">
				<el-form :model="form1">
					<el-form-item label="商品名字" :label-width="formLabelWidth">
						<el-input v-model="form1.name" autocomplete="off"></el-input>

					</el-form-item>
					<el-form-item label="商品简介" :label-width="formLabelWidth">
						<el-input v-model="form1.descriptions" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="数量" :label-width="formLabelWidth">
						<el-input v-model="form1.quantity" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="价格" :label-width="formLabelWidth">
						<el-input v-model="form1.price" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="主图" :label-width="formLabelWidth">
						<el-input v-model="form1.coverImg" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品ID" :label-width="formLabelWidth">
						<el-input v-model="form1.productCategory" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisibles = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormVisibles = false,quedings()">确 定</el-button>
				</div>
			</el-dialog>

			<el-table :data="tableData" style="width: 100%">
				<el-table-column label="商品 ID" prop="_id" width='250'>
				</el-table-column>
				<el-table-column label="商品名称" prop="name" width='250'>
				</el-table-column>
				<el-table-column label="描述" prop="descriptions">
				</el-table-column>
				<el-table-column label="商品操作" prop="name" width='250'>
					<template slot-scope="scope">
						<el-button type="success" round @click="dialogFormVisibles = true,update(scope.$index,scope.row)">修改</el-button>
						<el-button type="danger" round @click="deletes(scope.$index)">删除</el-button>
						
					</template>
				</el-table-column>
			</el-table>
		</template>

		<el-pagination background layout="prev, pager, next" :total="totalCount" @current-change="handleCurrentChange"
		 :current-page="currentPage" class='fen'></el-pagination>
	</div>
</template>
<script>
	import * as api from "../api/Goods";
	export default {
		name: "orderOPeration",
		data() {
			return {
				tableData: [],
				currentPage: 1,
				dialogFormVisible: false,
				dialogFormVisibles: false,
				form: {
					name: '',
					descriptions: '',
					quantity: '',
					price: '',
					coverImg: '',
					productCategory: ''
				},
				form1: {
					name: '',
					descriptions: '',
					quantity: '',
					price: '',
					coverImg: '',
					productCategory: ''
				},
				formLabelWidth: "120px",
				totalCount: 50,
				categories:[]
			};
		},
		methods: {
			close(){
				
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				api.products({
					per: 6,
					page: this.currentPage
				}).then(res => {
					this.tableData = res.data.products;
				});
			},
			queding() {
				api.addproduct({
					name: this.form.name,
					descriptions: this.form.descriptions,
					quantity: this.form.quantity,
					price: this.form.price,
					coverImg: this.form.coverImg,
					productCategory: this.form.productCategory
				}).then(res => {
					alert('添加成功	')
					this.handleCurrentChange()
					this.form.name=''
					this.form.descriptions=''
					this.form.quantity=''
					this.form.price=''
					this.form.coverImg=''
					this.form.productCategory=''
				});
			},
			deletes(scope) {
				api.deletes(this.tableData[scope]._id, {}).then(res => {
					alert('删除成功')
					this.handleCurrentChange()
				});
			},
			update(scope, row) {
				this.form1 = row
				this.form1.productCategory = row._id
			},
			quedings() {
				api.updateGoods(this.form1.productCategory, {
					name: this.form1.name,
					descriptions: this.form1.descriptions,
					quantity: this.form1.quantity,
					price: this.form1.price,
					coverImg: this.form1.coverImg,
					productCategory: this.form1.productCategory
				}).then(res => {
					alert('修改成功')
				})
			}
		},
		mounted() {
			api.products({
				per: 6,
				page: 1
			}).then(res => {
				this.totalCount = res.data.totalCount;
				this.tableData = res.data.products;
			});
			api.categories({
				per:1000,
				page:1
			}).then(res => {
				this.categories = res.data.categories
			})
		}
	};
</script>

<style scoped="">
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.img {
		width: 300px;
		display: block;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
		display: block;
	}
	.fen{
		position: absolute;
		left: 40%;
		bottom: 10px;
	}
	.el-select{
		width: 100%;
	}
</style>
